import React, { Component } from "react";

class Navbar extends Component {
  render() {
    return (
      <div style={{ background: "yellow" }}>
        <span>navbar</span>
        <button
          onClick={() => {
            this.props.event();
          }}
        >
          点击
        </button>
      </div>
    );
  }
}
class Siderbar extends Component {
  render() {
    return (
      <div style={{ background: "red", width: "300px" }}>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
        <li>9999999</li>
      </div>
    );
  }
}

export default class App extends Component {
  state = {
    isShow: true,
  };
  handleEvent = () => {
    this.setState({
      isShow: !this.state.isShow,
    });
  };
  render() {
    return (
      <div>
        <Navbar event={this.handleEvent} />

        {this.state.isShow && <Siderbar />}
      </div>
    );
  }
}
